<template name="funcList">
	<view>
		<scroll-view>
			<cu-custom bgColor="bg-green" :isBack="false">
				<block slot="backText"></block>
				<block slot="content">应用</block>
			</cu-custom>
			<!-- 轮播 -->
			<!-- <swiper class="screen-swiper square-dot"  :indicator-dots="true" :circular="true"
			 :autoplay="true" interval="5000" duration="500" >
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
					<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
				</swiper-item>
			</swiper> -->
			<!-- 中部应用宫格 -->
			<!-- <view class="bg-white"  >
				<view class="grid margin-bottom col-2 ">
				  <navigator  v-for="(item,index) in middleApps" :key="index" :url="'/pages/mcloud/' + item.name" class="nav-li" navigateTo
					  hover-class="none">
						<view class="flex align-center">
							<image :src="'/static/home/'+item.icon"  mode="aspectFill" class="line2-icon"></image>
							<view class="text-df">{{item.title}} <br/> <span class="text-light">{{item.text}}</span></view>
						</view>
					</navigator>
				</view>
			</view> -->
			<!-- 功能列表 -->
			<view class="cu-bar bg-white solid-bottom">
				<view class="action">
					<text class='cuIcon-title text-green'></text>功能应用
				</view>
			</view>
			<view class=" bg-white grid col-4 padding-sm">
				<view class="padding-sm " v-for="(item,index) in fMenu" :key="index" @tap="goPage(item.url)">
					<view class=" radius text-center shadow-blur ">
						<!-- <image :src="item.icon"  mode="aspectFill" class="line2-icon"></image> -->
						<view class="cu-avatar df " :style="{backgroundImage: 'url(' + item.icon + ')'}">
							<view class="cu-tag badge" v-if="getTtemDotInfo(item)">{{getTtemDotInfo(item)}}</view>
						</view>
						<view class="text-df margin-top">{{item.name}}</view>
					</view>
				</view>
			</view>

			<!-- 其他服务 -->
			<view class="cu-bar bg-white  margin-top solid-bottom">
				<view class="action">
					<text class='cuIcon-title text-yellow'></text>报表中心
				</view>
			</view>
			<view class=" bg-white grid col-4 padding-sm">
				<view class="padding-sm " v-for="(item,index) in rMenu" :key="index" @tap="goPage(item.url)">
					<view class=" radius text-center shadow-blur">
						<view class="cu-avatar df " :style="{backgroundImage: 'url(' + item.icon + ')'}">
						</view>
						<view class="text-df margin-top">{{item.name}}</view>
					</view>
				</view>
			</view>

			<view class="cu-tabbar-height">
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools'
	import {
		us,
		os
	} from '@/common/util/work.js'
	export default {
		name: 'home',
		props: {
			cur: String,
		},
		watch: {
			cur: {
				immediate: true,
				handler() {
					console.log('watch', this.cur)
					this.initMenu()
				},
			},
		},
		data() {
			return {
				swiperList: [{
						id: 1,
						type: 'image',
						url: '/static/banner/1.jpg',
						link: ''
					},
					{
						id: 2,
						type: 'image',
						url: '/static/banner/3.jpg',
						link: ''
					},
					// {id:3,type: 'image',url: '/static/banner/2.jpg', link: ''},
					// {id:4,type: 'image',url: '/static/banner/banner4.jpg', link: ''},
				],
				middleApps: [{
						icon: 'line2_icon1.png',
						title: '完成进度',
						'text': '38%',
						'name': 'wangongList'
					},
					{
						icon: 'line2_icon3.png',
						title: '合格率',
						'text': '98%',
						'name': 'pinjianReport'
					},
				],
				usList: us.data,
				osList: os.data,
				fMenu: [],
				rMenu: [],
				websock: '',
				heartCheck: null,
				lockReconnect: false,
				msgCount: 0,
				dot: {
					mailHome: false
				}
			}
		},

		created() {

			// us.data.forEach(item=>{
			// 	pathToBase64(item.icon).then(base64 => {
			// 		this.$set(item,'icon',base64)
			// 	}).catch(error => {
			// 		// console.error(error)
			// 	})
			// })
			// os.data.forEach(item=>{
			// 	pathToBase64(item.icon).then(base64 => {
			// 		this.$set(item,'icon',base64)
			// 	}).catch(error => {
			// 		// console.error(error)
			// 	})
			// })

		},
		methods: {
			initMenu() {
				// this.initWebSocket();
				// this.loadCount(0);
				console.log("init functionlist")
				let mpMenu = uni.getStorageSync('mpMenu')
				mpMenu.forEach(item => {
					pathToBase64(item.icon).then(base64 => {
						this.$set(item, 'icon', base64)
					}).catch(error => {})
				})
				this.fMenu = []
				this.rMenu = []
				this.fMenu = mpMenu.filter(function(item) {
					return item.type == 'F'
				})
				this.rMenu = mpMenu.filter(function(item) {
					return item.type == 'R'
				})

			},
			goPage(page) {
				if (!page) {
					return false;
				}
				if (page === 'annotationList') {
					this.msgCount = 0
				}
				this.dot[page] = false
				this.$Router.push({
					name: page
				})
			},
			initWebSocket: function() {
				// WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
				var userId = this.$store.getters.userid;
				var url = this.$config.apiUrl.replace("https://", "wss://").replace("http://", "ws://") + "/websocket/" + userId;
				console.log('websocket url>>' + url);
				this.websock = new WebSocket(url);
				this.websock.onopen = this.websocketOnopen;
				this.websock.onerror = this.websocketOnerror;
				this.websock.onmessage = this.websocketOnmessage;
				this.websock.onclose = this.websocketOnclose;
			},
			websocketOnopen: function() {
				console.log("WebSocket连接成功");
				//心跳检测重置
				//this.heartCheck.reset().start();
			},
			websocketOnerror: function() {
				console.log("WebSocket连接发生错误");
				this.reconnect();
			},
			websocketOnmessage: function(e) {
				console.log("-----接收消息-------", e.data);
				var data = eval("(" + e.data + ")"); //解析对象
				if (data.cmd == "topic") {
					//系统通知
					this.loadCount('1')
				} else if (data.cmd == "user") {
					//用户消息
					this.loadCount('2')
				} else if (data.cmd == 'email') {
					this.loadEmailCount()
				}

				//心跳检测重置
				//this.heartCheck.reset().start();
			},
			websocketOnclose: function(e) {
				console.log("connection closed (" + e.code + ")");
				this.reconnect();
			},
			websocketSend(text) { // 数据发送
				try {
					this.websock.send(text);
				} catch (err) {
					console.log("send failed (" + err.code + ")");
				}
			},
			reconnect() {
				// var that = this;
				// if(that.lockReconnect) return;
				// that.lockReconnect = true;
				// //没连接上会一直重连，设置延迟避免请求过多
				// setTimeout(function () {
				//   console.info("尝试重连...");
				//   that.initWebSocket();
				//   that.lockReconnect = false;
				// }, 5000);
			},
			loadCount(flag) {
				console.log("loadCount::flag", flag)
				let url = '/sys/annountCement/listByUser';
				this.$http.get(url).then(res => {
					console.log("res::", res)
					if (res.data.success) {
						let msg1Count = res.data.result.anntMsgTotal;
						let msg2Count = res.data.result.sysMsgTotal;
						this.msgCount = msg1Count + msg2Count
						console.log("this.msgCount", this.msgCount)
					}
				})
			},
			loadEmailCount() {
				this.dot.mailHome = true
			},
			getTtemDotInfo(item) {
				if (item.page === 'annotationList' && this.msgCount > 0) {
					return this.msgCount
				}
				return '';
			}
		}
	}
</script>

<style>
	.line2-icon {
		width: 60px;
		height: 60px;
	}

	.cu-avatar {
		background-position: center center;
		background-size: contain;
		background-repeat: no-repeat;
		background-color: transparent;
	}
</style>
